<template>
  <div>
    <van-nav-bar
      class="headers"
      title="社区"
      fixed
      @click-left="openLeftPopup"
      @click-right="openTopPopup_search"
    >
      <template #left>
        <van-icon name="user-circle-o" size="22" />
      </template>
      <template #right>
        <van-icon name="search" size="22" />
      </template>
    </van-nav-bar>
    <div class="main-container">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(ad, index) in $store.state.pageControl.ad_list" :key="index">
          <img v-lazy="ad.image" :alt="ad.desc" />
        </van-swipe-item>
      </van-swipe>
      <van-grid>
        <van-grid-item v-for="item in sectionlist" :key="item.index">
          <div @click="linkTo(item)">
            <van-image :src="item.image" />
            <br />
            <span>{{item.name}}</span>
          </div>
        </van-grid-item>
      </van-grid>
      <van-tabs v-model="active">
        <van-tab title="热门">
          <my-artical-card
            v-for="item in topiclist"
            :topic="item"
            :key="item.index"
          ></my-artical-card>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import myGoodCard from './base/MyGoodCard'
import myArticalCard from './base/MyArticalCard'
export default {
  name: 'Home',
  data() {
    return {
      topiclist: [],
      active: ''
    }
  },
  computed: {
    sectionlist() {
      var sectionlist = []
      for (var i in this.$store.state.pageControl.sectionlist) {
        if (this.$store.state.pageControl.sectionlist[i].fsection === null) {
          sectionlist.push(this.$store.state.pageControl.sectionlist[i])
        }
      }
      return sectionlist
    }
  },
  beforeMount() {
    this.$http
      .get('/topic/gettopic', { params: { section: 0 } })
      .then(res => {
        if (res.data.status === 200) {
          this.topiclist = res.data.topics
        }
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    ...mapMutations(['openLeftPopup', 'openTopPopup_search']),
    linkTo(section) {
      this.$router.push({ path: '/forum', query: { fsection: section.id } })
    },
  },
  components: {
    'my-good-card': myGoodCard,
    myArticalCard
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-swipe {
  width: 100%;
  height: 250px;
}
.van-swipe-item {
  width: 100%;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.van-grid-item {
  display: block;
}
.van-grid-item .van-image {
  display: inline-block;
  width: 50px;
  height: 50px;
  object-fit: cover;
}
</style>
